<template>
  <view>
	<view class="top-box">
		<image class="top-image" mode="aspectFill" :src="info.imageUrl"></image>
		<sin-barrage :list="logList" :bottom="bottom" :left="left" :color="color" :background="background" :opacity="0.7" :rows="3"
		         :msec="msec"></sin-barrage>
	</view>
	<view class="content-box">
		<view class="content-card">
			<view class="content-title">
				{{info.title}}
			</view>
			<view class="content-content">
				{{info.content}}
			</view>
		</view>
	</view>
	<view class="detail-box" >
		<u-parse :html="info.details"></u-parse>
	</view>
	<view class="data-box" v-if="info.type == 1">
		<view class="data-title">
			<view class="form-title flex" style="align-items: center;">
				<view style="border-radius: 50rpx;background-color: #E70012; width: 8rpx; height: 34rpx;"></view>
				<view style="font-weight: 700;font-size: 40rpx;color: #E70012;line-height: 40rpx;margin-left: 4rpx;">公益数据</view>
			</view>
		</view>
		<view class="data-content">
			<view class="data-item">
				<view class="data-label">
					转发次数
				</view>
				<view class="data-value">
					{{info.shareNum}}
				</view>
			</view>
			<view class="data-item">
				<view class="data-label">
					登记人数
				</view>
				<view class="data-value">
					{{info.signNum}}
				</view>
			</view>
			<view class="data-item">
				<view class="data-label">
					已发放数
				</view>
				<view class="data-value">
					{{info.grantNum}}
				</view>
			</view>
		</view>
	</view>
	<view class="button-box">
		<button class="button left" plain="true" @click="goChuandi(info.id)">{{info.type==0?"我要分享":"我要传递"}}</button>
		<button class="button right" plain="true" @click="goSign()">{{info.type==0?"我要参加":"我要领取"}}</button>
	</view>
	<view v-if="signFlag"  @click.native.stop="signFlag=false" style="position: absolute; width: 100%; height: 100%;background-color: #00000088;top: 0;left: 0; z-index: 100;">
		<view class="sign-form" @click.native.stop :style="{bottom:bottom}">
			<view class="close-button" @click.native.stop="signFlag=false">X</view>
			<view class="form-title flex" style="align-items: center;">
				<view style="background-color: #E70012; width: 8rpx; height: 34rpx;"></view>
				<view style="font-weight: 700;font-size: 40rpx;color: #E70012;line-height: 40rpx;margin-left: 4rpx;">报名登记</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<view class="item-label">姓名</view>
					<input class="item-input" @input="onChange()" v-model="signForm.name" placeholder="请输入您的姓名" placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
				</view>
				<view class="form-item">
					<view class="item-label">电话</view>
					<input class="item-input" type="number" @input="onChange()" v-model="signForm.phone" placeholder="请输入您的联系电话" placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
				</view>
				<view class="form-item">
					<view class="item-label">年龄</view>
					<input class="item-input" type="number" @input="onChange()" :adjust-position="false" 
					@focus="inputBindFocus" @blur="inputBindBlur" v-model="signForm.age" placeholder="请输入您的年龄" 
					placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;height: 88rpx;line-height: 88rpx;"></input>
				</view>
				<view class="form-item">
					<view class="item-label">地点</view>
					<view class="flex">
						<image mode="aspectFill" style="width: 40rpx;height: 40rpx;" src="/static/images/map.png"></image>
						<view style="display: flex;" v-if="signForm.addressId == 0">
							<view class="place-item" @click="show = true">{{signForm.type == 0? "请查看地点":"请选择领取地点"}}</view>
							<view class="place-item trans">▲</view>
						</view>
						<view style="display: flex;" v-if="signForm.addressId > 0">
							<view class="place-item" @click="show = true">{{signForm.address}}</view>
							<view class="place-item trans">▲</view>
						</view>
					</view>
				</view>
				<view class="form-item" >
					<button class="item-button" :class="{ colormo: !submitFlag}" @click="sumitSign()">确认提交</button>
				</view>
			</view>
		</view>
	</view>
	<u-popup v-model="show" mode="bottom" border-radius="20" :close = "close">
		<scroll-view class="address-list" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
			<view class="address-item" v-if="addressList.length>0" v-for="(item,index) in addressList" @click="chooseItem(item)">
				<view class="item-top">
					<image class="address-icon" mode="aspectFill" src="/static/images/map.png"></image>
					<view>
						<view class="address-info">{{item.name}}</view>
						<view class="address-tips">{{item.address}}</view>
					</view>
				</view>
				<view class="item-bottom">
					<view class="address-tips">点击选择该地点</view>
					<button class="address-button" @click="goDaohang(item)">去导航</button>
				</view>
			</view>
			<view v-if="addressList.length==0" class="no-address">
				<view>该活动地点暂时未确定，请等待！</view>
			</view>
		</scroll-view>
	</u-popup>
  </view>
</template>

<script>
	
 import { getToken } from '@/utils/auth';
	import sinBarrage from '@/components/sin-barrage/sin-barrage.vue'
import { getActivityInfo,getActivityAddress,share,sign,shareGet,getLogList  } from '@/api/system/pubulic'
import { toast} from '@/utils/common'
import storage from '@/utils/storage'
import constant from '@/utils/constant'


  export default {
	components: {
		sinBarrage
	},
    data() {
      return {
        params: {},
		logList: [],
		info:{
			
		},
		user:{
			userId : storage.get(constant.id),
			name : storage.get(constant.name),
			avatar : storage.get(constant.avatar),
			info : uni.getStorageSync("user_info")
		},
		signFlag: false,
		addressList:[],
		bottom: 26,
		left: 34,
		msec: 2000,
		signForm:{
			type:0,
			activityId:0,
			name:"",
			phone:"",
			age:null,
			limitAgeMin:50,
			limitAgeMax:0,
			addressId:0,
			address:""
		},
		show:false,
		submitFlag:false
      }
    },
    props: {
      src: {
        type: [String],
        default: null
      }
    },
	onShareAppMessage() {
		const promise = new Promise(resolve => {
			this.shareFun()
		})
		return {
			title: this.info.title||"济南中科+",
			path:'pages/detail/index?id='+this.info.id+(this.user.userId?'&u='+this.user.userId:''),
			promise
		}
	},
	onShareTimeline() {
		const promise = new Promise(resolve => {
			this.shareFun()
		})
		return {
			title: this.info.title||"济南中科+",
			path:'pages/detail/index?id='+this.info.id+(this.user.userId?'&u='+this.user.userId:''),
			promise
		}
	},
    onLoad(event) {
		console.log(event)
		if(event.scene){
			const scene = decodeURIComponent(event.scene);
			event = this.parseURLParamsTraditional(scene);
		}
      this.params = event
	  if(event.u){
		  const currentTime = Date.now(); // 当前时间戳（毫秒）
		  const expireTime = currentTime + 3600 * 1000; // 计算过期时间
		  storage.set("ysUserId",{
			value: event.u,
			expireTime: expireTime
		  })
		  if(event.id){
			shareGet({activityId:event.id,userId:event.u})
		  }
	  }
      if (event.title) {
        uni.setNavigationBarTitle({
          title: event.title
        })
      }
	  if(event.id){
		  getActivityInfo({id:event.id}).then((res)=>{
			  this.info = res.data
			  uni.setNavigationBarTitle({
			    title: res.data.title
			  })
		  })
		  getLogList({activityId:event.id}).then((res)=>{
			  this.logList = res.data.rows
		  })
	  }
    },
	methods:{
		parseURLParamsTraditional(url) {
		  // 获取查询字符串部分
		  const queryString = url;
		  if(url.indexOf('?')>0){
			  queryString = url.split('?')[1] || '';
		  }
		  // 分割参数
		  const params = {};
		  const pairs = queryString.split('&');
		  
		  for (const pair of pairs) {
		    if (!pair) continue;
		    
		    const [key, value] = pair.split('=');
		    const decodedKey = decodeURIComponent(key);
		    const decodedValue = decodeURIComponent(value || '');
		    
		    // 处理重复参数（保留最后一个值）
		    params[decodedKey] = decodedValue;
		  }
		  
		  return params;
		},
		avatarImg(item){
			let avatar = item || ""
			if (!isHttp(avatar)) {
			  avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
			}
			return avatar;
		},
		shareFun(){
			share({activityId:this.info.id}).then()
		},
		getActivityAddress(id){
			getActivityAddress({id:id}).then((res)=>{
				this.addressList = res.data;
			})
		},
		goDaohang(item){
			uni.openLocation({
				latitude: parseFloat(item.lat),
				longitude: parseFloat(item.lng),
				name: item.name,
				address: item.address,
				success: function () {
					console.log('success');
				}
			});
		},
		chooseItem(item){
			this.show = false
			this.signForm.addressId = item.id;
			this.signForm.address = item.name;
			//赋值
		},
		open() {
			// 弹出层内容自动在最底部
			// this.toView = this.list[this.list.length-1]
			// 弹出层内容自动在最顶部
			this.toView = this.list[0]
		},
		close() {
			this.show = false
			// console.log('close');
		},
		inputValueChange() {},
		inputBindFocus(e) {
			this.bottom = e.detail.height;
		},
		inputBindBlur() {
			this.bottom = 0;
		},
		sumitSign(){
			if(this.submitFlag){
				if(this.signForm.phone.length != 11){
					toast("请检查手机号是否正确");
					return;
				}
				if(this.signForm.limitAgeMin!=0 && this.signForm.age<this.signForm.limitAgeMin){
					toast("小于"+this.signForm.limitAgeMin+"岁不可领取");
					return;
				}
				
				if(this.signForm.limitAgeMax!=0 && this.signForm.age>this.signForm.limitAgeMax){
					toast("大于"+this.signForm.limitAgeMax+"岁不可领取");
					return;
				}
				//提交
				if(this.signForm.type == 1 && this.signForm.addressId == 0){
					toast("请选择领取地点");
					return;
				}
				//提交
				if(this.signForm.type == 0 && this.signForm.addressId == 0){
					toast("请先查看地点");
					return;
				}
				uni.showLoading();
				sign(this.signForm).then(()=>{
					uni.hideLoading();
					toast("报名成功，请等待客服人员审核");
					setTimeout(()=>{
						this.signFlag = false;
					},2000)
				})

			}
		},
		onChange(){
			if(this.signForm.name != "" && this.signForm.phone != "" && this.signForm.age != "" && this.signForm.age != null){
				this.submitFlag = true
			}else{
				this.submitFlag = false
			}
		},
		goChuandi(){
			if(!getToken()){
			  uni.navigateTo({
				url:"/pages/login"
			  })
			  return
			}
			uni.navigateTo({
				url:"/pages/detail/chuandi?id="+this.info.id
			})
		},
		goSign(){
			  if(!getToken()){
				  uni.navigateTo({
					url:"/pages/login"
				  })
					return
			  }
			  let yqUserId = this.getValue();
			  this.signForm = {
				type:this.info.type,
				activityId:this.info.id,
				name:this.user.info.name,
				phone:this.user.info.phone,
				age:this.user.info.age,
				limitAgeMin:this.info.limitAgeMin,
				limitAgeMax:this.info.limitAgeMax,
				addressId:0,
				address:"",
				yqUserId:yqUserId
			  };
			  this.getActivityAddress(this.info.id);
			  this.signFlag = true;	
			  this.onChange();
		},
		getValue(){
			const res = storage.get("yqUserId");
			if (res) {
				if(res.expireTime > Date.now()){
					return res.value;
				}else{
					uni.removeStorage({
						key: "yqUserId",
						success: function () {
						console.log('缓存已过期，已移除');
						}
					});
				} // 缓存未过期，返回值
			} 
			return null; // 缓存过期，返回 null
		}
	}
  }
</script>
<style lang="scss" scoped>
	.address-list{
		padding: 20rpx;
		max-height: 600rpx;
		min-height: 280rpx;
		overflow-y: auto;
		.no-address{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 280rpx;
			font-size: 32rpx;
			color: #333333;
		}
		.address-item{
			border: 2rpx solid #BDBDBD;
			border-radius: 20rpx;
			padding: 10rpx 40rpx;
			margin-bottom: 20rpx;
			.item-top{
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #BDBDBD;
				padding: 30rpx 0;
				.address-icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
				.address-info{
					color: #333333;
					font-size: 26rpx;
					font-weight: 600;
					letter-spacing: 2rpx;
				}
				.address-tips{
					color: #7b7979;
					font-size: 24rpx;
					letter-spacing: 3rpx;
				}
			}
			.item-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 10rpx;
				.address-tips{
					color: #BDBDBD;
					font-size: 24rpx;
					letter-spacing: 3rpx;
				}
				.address-button{
					background-color: #E7654E;
					border-radius: 20rpx;
					width: 120rpx;
					//height: 30rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 5rpx 20rpx;
					letter-spacing: 1rpx;
					margin: 0;
					
				}
			}
		}
	}
	.sign-form{
		background-image: url(@/static/images/signBg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 1048rpx;
		width: 750rpx;
		z-index: 1000;
		.close-button{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			line-height: 60rpx;
		}
		.form-title{
			position: absolute;
			top: 100rpx;
			left: 30rpx;
		}
		.form-content{
			position: absolute;
			top: 136rpx;
			left: 0;
			padding: 52rpx 62rpx;
			.form-item{
				margin-bottom: 30rpx;
				.item-label{
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.item-input{
					background: #FFFFFF;
					border-radius: 45rpx;
					padding: 0rpx 40rpx;
					width: 546rpx;
					height: 88rpx;
					line-height: 88rpx;
					box-sizing:content-box;
				}
				.item-button{
					border-radius: 45rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					text-align: center;
					height: 72rpx;
					width: 626rpx;
					background-color: #E7654E;
					line-height: 72rpx;
					letter-spacing: 4rpx;
					margin-top: 50rpx;
				}
				.colormo{
					background-color: #BDBDBD;
				}
				.place-item{
					color: #3181E8;
					font-weight: 400;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 5rpx;
					letter-spacing: 1rpx;
					font-size: 32rpx;
				}
				.trans{
					transform: rotate(180deg);
					font-size: 26rpx;
				}
			}
		}
	}
	.top-box{
		position: relative;
		width: 750rpx;
		height: 578rpx;
		.top-image{
			width: 100%;
			height: 100%;
		}
	}
	.content-box{
		background: linear-gradient(180deg,#E85142 0%,#E85142dd 25%, #F4F5F6 90%);
		width: 100%;
		height: 100%;
		padding: 30rpx;
		.content-card{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			.content-title{
				font-weight: 700;
				font-size: 40rpx;
				color: #E70012;
				line-height: 50rpx;
				margin-bottom: 20rpx;
				letter-spacing: 2rpx;
			}
			.content-content{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 40rpx;
				letter-spacing: 1rpx;
			}
		}
	}
	
	.detail-box{
		border-radius: 20rpx;
		margin: 30rpx;
		background: #FFFFFF;
		padding: 30rpx 20rpx;
		text-align: justify;
	}
	.data-box{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin: 30rpx;
		.data-title{
			margin-bottom: 26rpx;
		}
		.data-content{
			width: 650rpx;
			height: 172rpx;
			background: linear-gradient( 180deg, #FEF3F4 0%, rgba(255,255,255,0) 100%);
			border-radius: 20rpx;
			border: 2rpx solid rgba(223,36,19,0.11);
			display: flex;
			.data-item{
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.data-label{
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
					line-height: 40rpx;
					margin-bottom: 12rpx;
				}
				.data-value{
					font-weight: 700;
					font-size: 36rpx;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}
	.button-box{
		display: flex;
		padding-bottom: 40rpx;
		.button{
			text-align: center;
			width: 312rpx;
			height: 88rpx;
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 36rpx;
			line-height: 88rpx;
			letter-spacing: 3rpx;
			border: none;
		}
		.left{
			color: #FD8B23;
			background: linear-gradient( 180deg, #F9E5D2 0%, #F2C398 100%);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,88,69,0.28);
		}
		.right{
			color: #FFFFFF;
			background: linear-gradient( 180deg, #EB6F55 0%, #DE4B3B 100%);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,88,69,0.28);
		}
	}
</style>